import LocaleContext from "@/Context/LocaleContext";
import allLocales from "@/locale/Calendar";
import { Dayjs } from "dayjs";
import { useContext } from "react";

interface HeaderProps{
    curMonth:Dayjs;
    prevMonthHandler:()=>void;
    nextMonthHandler:()=>void
    todayHandler:()=>void
}


export default function Header(props:HeaderProps) {
    // 获取语言包
    const localeContext = useContext(LocaleContext)
    const CalendarLocale = allLocales[localeContext.locale]

   let { curMonth ,prevMonthHandler , nextMonthHandler , todayHandler } = props

  
	return (
		<div className="calendar-header">
			<div className="calendar-header-left">
				<div className="calendar-header-icon" onClick={prevMonthHandler}>&lt;</div>
				<div className="calendar-header-value"> {curMonth.format(CalendarLocale.formatMonth)} </div>
				<div className="calendar-header-icon" onClick={nextMonthHandler} >&gt;</div>
				<button className="calendar-header-btn" onClick={todayHandler}>{CalendarLocale.today} </button>
			</div>
		</div>
	);
}
